<template>
	<van-row>
		<van-col span="6">
			<van-sticky :offset-top="50" :z-index="0">
				<van-sidebar v-model="activeKey">
					<van-sidebar-item v-for="(item, i) in categoryList" :key="i" class="van-ellipsis" :title="item.name" @click="onClickLeftMenus(item.id)" />
				</van-sidebar>
			</van-sticky>
		</van-col>
		<van-col span="18">
			<div class="product-list">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<div v-for="(item, index) in productList" :key="index" @click="onDetail(item.id)">
							<van-card
								:num="item.sold_count"
								:tag="item.sold_count > 1000 ? '新品' : ''"
								:price="item.price"
								:desc="item.spec"
								:title="item.title"
								:thumb="`${APIDomainName}${item.pic}`"
							/>
						</div>
					</van-list>
				</van-pull-refresh>
			</div>
		</van-col>
	</van-row>
</template>

<script>
//1.导入封装后的接口
import { getProductListAPI } from '@/api/product.js';
import { getCategoryAPI } from '@/api/category.js';
export default {
	name: 'ProductList',
	data() {
		return {
			activeKey: 0, //侧边栏绑定变量
			productList: [],
			categoryList: [], //商品分类列表
			category_id: null, //当前选中的商品分类id

			//分页
			pageIndex: 1, //页码
			pageSize: 10, //页大小 一般是固定10
			pageTotal: 0, //总页数

			//控制下拉刷新 上拉加载更多
			loading: false,
			finished: false,
			refreshing: false
		};
	},
	//在生命周期函数中调用API接口从后端取业务数据
	created() {
		//使用封装的方法
		getCategoryAPI().then(result => {
			// console.log(result);
			debugger
			this.categoryList = result.data;

			//初始商品列表数据
			this.category_id = this.categoryList[0].id;
			this.onRefresh(); //刷新商品数据
		});
	},

	methods: {
		onDetail(id) {
			// this.$router.push({ name: 'productDetail', params: { id } }); //用this.$route.params接收
			// 也可以用下列方法路由导航传参
			this.$router.push({ path: '/product/detail', query: { id: id } });//用this.$route.query接收
			
			// this.$router.push('/product/detail&id=' + id);//用this.$route.query接收
			
			
			// this.$router.push({ path: '/product/detail', params: { id: id } }); //path不能用 params传参
			// this.$router.push({ name: 'product Detail', query: { id } });  //可以用this.$route.query接收
			// this.$router.push({ path: `/product/detail/${id}`}); //path不能用 params传参
		},

		//点击左侧导航栏（注意传递的参数）
		onClickLeftMenus(category_id) {
			this.category_id = category_id;			
			this.onRefresh(); //刷新商品数据
		},

		//加载商品数据（分页）
		onLoad() {
			this.pageIndex += 1; //页码加1
			//准备参数
			let params = {
				category_id: this.category_id,
				pageIndex: this.pageIndex, //页码
				pageSize: this.pageSize //页大小
			};
			//调用接口
			getProductListAPI(params).then(result => {				
				// console.log(result); //控制台显示，可以分析返回数据的结构
				// 记住总页数
				this.pageTotal = result.pageTotal;

				//是否正在下拉刷新中
				if (this.refreshing) {
					this.productList = [];
					this.refreshing = false;
				}

				//获取的分页数据与原有的列表数据拼接
				if (result.data.length > 0) {
					//有数据
					this.productList = this.productList.concat(result.data);
				}

				//本次加载结束
				this.loading = false;

				//判断是否加载完了
				if (this.pageIndex > this.pageTotal) {
					this.finished = true;
				}
			});
		},

		//下拉刷新
		onRefresh() {
			this.pageIndex = 0; //重置页码
			this.productList = []; //清空列表数据
			this.finished = false;

			// 重新加载数据
			// 将 loading 设置为 true，表示处于加载状态
			this.loading = true;
			this.onLoad();
		}
	}
};
</script>

<style lang="less" scoped>
.product-list {
	background-color: #f9f9f9;
}

.van-sidebar {
	width: 120px;
	margin-right: 5px;

	// 样式穿透
	// vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。
	// css 使用 >>>
	// less 使用 /deep/
	// scss 使用 ::v-deep
	/deep/.van-sidebar-item__text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100%;
	}
}
</style>
